<template>
  <div>
    <el-form label-width="80px" :inline="false" size="default">
      <el-form-item label="SPU名称">
        <el-input v-model="spuInfo.spuName"></el-input>
      </el-form-item>
      <el-form-item label="品牌">
        <el-select placeholder="请选择品牌" clearable>
          <el-option>品牌1</el-option>
          <el-option>品牌2</el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="SPU描述">
        <el-input
          v-model="spuInfo.description"
          size="default"
          clearable
          type="textarea"
        ></el-input>
      </el-form-item>
      <el-form-item label="SPU图片">
        <el-upload
          v-model:file-list="fileList"
          action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
          list-type="picture-card"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove"
        >
          <el-icon><Plus /></el-icon>
        </el-upload>

        <el-dialog v-model="dialogVisible">
          <img w-full :src="dialogImageUrl" alt="Preview Image" />
        </el-dialog>
      </el-form-item>
      <el-form-item label="销售属性">
        <el-select placeholder="请选择销售属性">
          <el-option>尺寸</el-option>
          <el-option>颜色</el-option>
        </el-select>

        <el-button icon="ele-Plus" type="primary" style="margin-left: 20px"
          >添加销售属性</el-button
        >
      </el-form-item>
      <el-form-item>
        <el-table border stripe>
          <el-table-column type="index" width="80" label="序号" />
          <el-table-column label="属性名"></el-table-column>
          <el-table-column label="属性值名称列表"></el-table-column>
          <el-table-column label="操作"></el-table-column>
        </el-table>
      </el-form-item>
      <el-form-item>
        <el-button type="primary">保存</el-button>
        <el-button @click="emit('changeType', 0)">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "SpuForm",
});
</script>

<script setup lang="ts">
import type { spuItemType } from "@/api/spu";
import { onMounted, ref } from "vue";
import { Plus } from "@element-plus/icons-vue";
import { ElMessage, type UploadProps, type UploadUserFile } from "element-plus";
import { reqAllTrademark, type trademarkListType } from "@/api/trademark";
import {
  reqBaseSaleAttrList,
  type baseSaleAttrListType,
  reqSaleAttrSelf,
  type saleAttrListType,
  reqSpuImageList,
  type spuImgListType,
} from "@/api/spu";
const props = defineProps<{
  spuInfo: spuItemType;
}>();
//接收切换type的自定义事件
const emit = defineEmits<{
  (event: "changeType", type: number, row?: spuItemType): void;
}>();

//图片墙的路径
const fileList = ref<UploadUserFile[]>([
  {
    name: "food.jpeg",
    url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
  },
  {
    name: "food.jpeg",
    url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
  },
  {
    name: "food.jpeg",
    url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
  },
  {
    name: "food.jpeg",
    url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
  },
]);
const dialogImageUrl = ref("");
const dialogVisible = ref(false);

const handleRemove: UploadProps["onRemove"] = (uploadFile, uploadFiles) => {
  console.log(uploadFile, uploadFiles);
};

const handlePictureCardPreview: UploadProps["onPreview"] = (uploadFile) => {
  dialogImageUrl.value = uploadFile.url!;
  dialogVisible.value = true;
};
//定义一些值接收初始化请求的信息
const trademarkList = ref<trademarkListType>([]);
const saleAttrList = ref<baseSaleAttrListType>([]);
const saleAttrSelf = ref<saleAttrListType>([]);
const imageList = ref<spuImgListType>([]);
//判断当前是修改还是新增 来发送其他的数据请求
//如果是新增则需要发送1. 所有品牌列表 2.所有销售属性列表
//如果是修改则需要发发送1. 所有品牌列表 2.所有销售属性列表 3.根据当前spuId获取图片列表 4. 根据当前spuId获取销售属性列表
onMounted(async () => {
  try {
    if (props.spuInfo.id) {
      //修改
      const p1 = reqAllTrademark();
      const p2 = reqBaseSaleAttrList();
      const p3 = reqSaleAttrSelf(props.spuInfo.id);
      const p4 = reqSpuImageList(props.spuInfo.id);

      const result = await Promise.all([p1, p2, p3, p4]);
      trademarkList.value = result[0];
      saleAttrList.value = result[1];
      saleAttrSelf.value = result[2];
      imageList.value = result[3];
    } else {
      //新增
      const p1 = reqAllTrademark();
      const p2 = reqBaseSaleAttrList();
      const result = await Promise.all([p1, p2]);
      trademarkList.value = result[0];
      saleAttrList.value = result[1];
    }
  } catch (e: any) {
    ElMessage.error(e.message);
  }
});
</script>

<style scoped></style>
